<template>
  <section class="bg_img" :style="{background: `url(${LBTIMGBASE64.BEIJINGTU3X}) no-repeat center center`}">
    <div class="bg_black log_box"></div>
    <header>
      <img src="./../assets/images/login/LOGO@3x.png">
      <h3 class="f_white">大课橙OA后台管理系统</h3>
    </header>
    <div class="log_photo">
      <img src="./../assets/images/login/zutu@3x.png">
      <div class="p_move">
        <img class="icon1" src="./../assets/images/login/bus.png">
        <img class="icon2" src="./../assets/images/login/icon2.png">
        <img class="icon3" src="./../assets/images/login/icon3.png">
        <img class="icon4" src="./../assets/images/login/icon4.png">
        <img class="icon5" src="./../assets/images/login/icon5.png">
      </div>
    </div>
    <div class="log_main">
      <div>
        <h4 class="f_white">后台用户登录</h4>
        <ul>
          <li>
            <i class="fa fa-user-o"></i>
            <input class="text" type="text" placeholder="请输入用户名" name="uname" v-model="inputtest.uname">
          </li>
          <li>
            <i class="fa fa-lock"></i>
            <input class="text" type="password" placeholder="请输入密码" name="pwd" v-model="inputtest.pwd">
          </li>
        </ul>
        <div class="check">
          <div class="checkbox" :class='{click:bClick}' @click='click'></div>
          <p class="f_white">记住密码</p>
        </div>
        <div class="log_btn">
          <input type="button" value="登录" class="bg_blue f_white" v-on:click="submit">
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  export default{
    data () {
      return {
        bClick: false,
        inputtest: {},
        xtoken: ''
      }
    },
    mounted () {},
    methods: {
      click () {
        this.bClick = !this.bClick
      },
      submit () {
        // this.$http.post(`http://119.23.36.128:8020/yxt-web/auth/login-test?uname=${this.inputtest.uname}&pwd=${this.inputtest.pwd}`, {credentials: true}).then(function () {
        //   console.log('ttt')
        // })
        this.$http.post(this._httpUrl + 'auth/login',
          {
            uname: this.inputtest.uname,
            pwd: this.inputtest.pwd
          }).then(function (response) {
            if (response.body.code === '000') {
              // window.location.href = '/#/dashboard'
              document.cookie = `yxt-xtoken=${response.data.data.xtoken}`
              this.xtoken = response.data.data.xtoken
              console.log('asdf')
              this.$router.push({
                path: '/home',
                params: {
                  sysMenuList: response.data.data.sysMenuList
                }
              })
              localStorage.setItem('xtoken', response.data.data.xtoken)
              // localStorage.setItem('uname', this.inputtest.uname)
              // localStorage.setItem('pwd', this.inputtest.pwd)
              // return JSON.parse(localStorage.getItem('uname', 'pwd')) || []
            } else {
              alert('您输入的密码或账号不正确')
              localStorage.removeItem('xtoken')
              this.inputtest = {}
            }
          }, function (response) {
            // this.$router.go('/404')
          }
        )
      }
    }
  }
</script>

<style lang="less" scoped>
  .click
  {
    background: url('./../assets/images/login/jizhumima@3x.png') no-repeat !important;
    background-size: 100% !important;
  }
  @import '/static/css/all-use.css';
  @import '/static/css/rotate.css';
  .bg_img
  {
    background-size: 100% !important;
    position: fixed;
    width: 100%; height: 100%;
    /*min-height: 638px;*/
    min-width: 1180px;
    /*background: url('./../assets/images/login/beijingtu@3x.png') no-repeat center center;*/
    background-size: cover;
    overflow: hidden;
  } 
  header
  {
    width: 100%; height: 100px;
  }
  header img
  {
    position: relative; left: 3%; top: 22%;
    float: left;
    width: 4%; height: 64%;
  }
  header h3
  {
    position: relative; left: 4%; top: 46%;
  }
  .log_box
  {
    position: absolute; top: 30%; right: 6%;
    border-radius: 4px;
    width: 26%; height: 50%;
    min-height: 310px;
    opacity: 0.4;
  }

  .log_photo
  {
    position: absolute; left: 10%; top: 20%;
    width: 36%; height: 60%;
    min-width: 490px; min-height: 460px;
    background: center center;
  }
  .log_photo img
  {
    width: 100%; height: 100%;
  }
  .log_photo .p_move
  {
    position: absolute; top: 38%; left: 7%;
    width: 76%; height: 42%;
    border-radius: 60%;
    -webkit-transform: rotateY(-6deg) rotateY(14deg) rotateZ(14deg);
  }
  .log_photo .p_move img
  {
    width: 14%; height: 20%;
    -webkit-transform: rotate(-14deg);
  }
  .log_photo .p_move .icon1
  {
    position: absolute; top: 76%; left: 64%;
    width: 20%; height: 36%;
    -webkit-animation: cir1 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
  }
  .log_photo .p_move .icon2
  {
    position: absolute; top: 70%; left: 4%;
    width: 14%; height: 26%;
    -webkit-animation: cir2 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
  }
  .log_photo .p_move .icon3
  {
    position: absolute; top: 40%; left: 92%;
    width: 14%; height: 26%;
    -webkit-animation: cir3 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
  }
  .log_photo .p_move .icon4
  {
    position: absolute; top: 0%; left: 78%;
    width: 12%; height: 22%;
    -webkit-animation: cir4 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
  }
  .log_photo .p_move .icon5
  {
    position: absolute; top: 0%; left: 4%;
    width: 13%; height: 24%;
   -webkit-animation: cir5 4s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count:infinite;
   opacity: 0;
  }  
 
  .log_main
  {
    position: absolute; top: 30%; right: 6%;
    width: 26%; height: 50%;
    min-height: 310px;
  }
  .log_main h4
  {
    font-size: 20px;
    line-height: 84px;
    text-align: center;
    font-weight: normal;
  }
  .log_main ul 
  {
    width: 100%;
    overflow: hidden;
  }
  .log_main ul li
  {
    position: relative; left: 10%;
    border-radius: 4px;
    margin-top: 18px;
    width: 80%; height: 36px;
    background: #fff;
  }
  .log_main ul li i
  {
    position: relative; left: 6%; top: 4%;
  }
  .log_main ul li input
  {
    border-left: 1px solid #999 !important;
    border-style: none;
    text-indent: 4%;
    margin-top: 4%;
    margin-left: 10%;
    width: 70%;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: 0 0 0 1000px white inset; 
  }
  .log_main .check
  {
    position: relative; left: 10%; top: 10px;
    width: 80%; height: 20px;
  }
  .log_main .check .checkbox
  {
    position: absolute; top: 12%; left: 0;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 2px;
  }
  .log_main .check p
  {
    margin-left: 10%;
    font-size: 14px;
    line-height: 22px;
  }
  .log_main .log_btn
  {
    position: absolute; left: 10%; top: 78%;
    width: 80%; height: 34px;
  }
  .log_main .log_btn input
  {
    width: 100%; height: 34px;
    border-radius: 4px;
    border-style: none;
    font-size: 16px;
  }
</style>
